<template>
	<view class="content">
		<u-form :model="formData" ref="uForm" label-align="center" :label-style="labelStyle" :error-type="errorType"
			label-width=200>
			<u-form-item label="照片">
				<uni-file-picker ref="avatar" :auto-upload="false" file-mediatype="image" limit="1" v-model="avatar"
					:sizeType="['compressed']" @select="selectFile"></uni-file-picker>
			</u-form-item>
			<view class="form-tips">
				为确保显示效果，照片宽高比建议大约为1:1.5
			</view>
			<u-form-item prop="nickname" label="姓名" required>
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.nickname" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="id_number" label="身份证号">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.id_number" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="sex" label="性别">
				<u-radio-group v-model="formData.sex" @change="changeSex">
					<u-radio v-for="(item, index) in gander" :key="index" :name="item.text">
						{{item.text}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="nation" label="民族">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.nation" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="age" label="年龄">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.age" trim :custom-style="styles"
					:placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="job" label="职业或职务">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.job" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="mobile" label="联系方式" required>
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.mobile" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="address" label="单位或住址">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.address" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
		</u-form>
		<!-- 底部信息 -->
		<view class="footer" v-if="isEmployee">
			<label>
				<checkbox-group @change="checkboxChange">
					<checkbox class="footer-checkbox" value="true" :checked="agreement" active-color="#737373"
						shape="circle"></checkbox><text>同意</text>
				</checkbox-group>
			</label>
			<!-- 协议地址 -->
			<navigator url="../agreement/agreement" open-type="navigate" style="color: #007AFF;">《调解员协议》</navigator>
		</view>
		<u-button class="bottom" type="primary" :disabled="disabled" :loading="loading"
			@click="submit">保存</u-button>
	</view>
</template>

<script>
	let gander = [{
		"text": "未知"
	}, {
		"text": "男"
	}, {
		"text": "女"
	}]
	export default {
		data() {
			let formData = {
				avatar: vk.getVuex("$user.userInfo.avatar"),
				avatarFile: vk.getVuex("$user.userInfo.avatarFile"),
				nickname: vk.getVuex("$user.userInfo.nickname"),
				id_number: vk.getVuex("$user.userInfo.id_number"),
				sex: vk.getVuex("$user.userInfo.sex"),
				nation: vk.getVuex("$user.userInfo.nation"),
				age: vk.getVuex("$user.userInfo.age"),
				job: vk.getVuex("$user.userInfo.job"),
				mobile: vk.getVuex("$user.userInfo.mobile"),
				address: vk.getVuex("$user.userInfo.address"),
			};
			// 页面数据变量
			return {
				isEmployee: vk.getVuex('$user.userInfo.role[0]') == 'tiaojie_employee',
				agreement: false,
				
				disabled: false,
				loading: false,

				gander,
				avatar: [],

				formData,

				rules: {
					"nickname": [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur',
					}],
					"id_number": [{
							validator: (rule, value, callback) => {
								return vk.pubfn.checkStr(value, 'idcard');
							},
							message: '请输入正确的身份证号',
							trigger: ['change', 'blur'],
						}
					],
					"mobile": [{
						required: true,
						message: '请输入联系方式',
						trigger: 'blur',
					}, {
						validator: (rule, value, callback) => {
							return vk.pubfn.checkStr(value, 'mobile');
						},
						message: '请输入11位手机号码',
						trigger: ['change', 'blur'],
					}],
				},
				placeholderStyle: this.$css.placeholderStyle,
				styles: this.$css.styles,
				errorType: this.$css.errorType,
				labelStyle: this.$css.labelStyle,
			}
		},
		onLoad(options) {
			this.init(options);
		},
		onReady() {
			if (this.$refs.uForm) this.$refs.uForm.setRules(this.rules);
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options = {}) {
				console.log("init: ", options);
				if (vk.pubfn.isNull(vk.getVuex("$user.userInfo"))) {
					this.login();
				} else {
					if (!this.formData.sex) this.formData.sex = gander[0].text;
					this.avatar = this.formData.avatarFile
				}
			},
			// 登录
			login() {
				uni.navigateTo({
					url: "/pages/userCenter/login/index/index",
					events: {
						loginSuccess: () => {
							// 随便修改一下data值，刷新页面绑定值。  也可以 this.userInfo = vk.getVuex('$user.salesInfo');
							this.refreshTime = new Date().getTime();
						}
					}
				})
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			changeSex(e) {
				this.formData.sex = e
			},
			checkboxChange(e) {
				let value = e.detail.value || [];
				if (value.length > 0 && value[0]) {
					this.agreement = true;
				} else {
					this.agreement = false;
				}
			},
			submit() {
				if (this.isEmployee && !this.agreement) {
					vk.toast('请阅读并同意调解员协议', "none");
					return;
				}

				this.disabled = true;
				this.loading = true;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.submitForm();
					} else {
						this.disabled = false;
						this.loading = false;
					}
				})
			},
			// 提交
			submitForm() {
				if (vk.pubfn.isNotNull(this.avatar)) {
					this.formData.avatarFile = this.avatar
					this.formData.avatar = this.avatar[0].url;
				}
				vk.callFunction({
					url: this.$api.RegisterProfile,
					loading: true,
					data: {
						_id: vk.getVuex("$user.userInfo._id"),
						...this.formData
					},
					success: (res) => {
						vk.toast('保存成功');
						vk.setVuex("$user.userInfo", res.info);
						setTimeout(() => {
							vk.navigateBack();
						}, 1000);
					}
				})
			},
			selectFile(e) {
				let file = e.tempFiles[0];
				if (file.size > 5 * 1024 * 1024) {
					vk.alert('文件大小不得超过5M');
					this.$refs.avatar.clearFiles();
					return false;
				} else {
					this.$refs.avatar.upload();
				}
			},
		}
	}
</script>
<style scoped>
	.footer {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		margin: 40rpx 0 40rpx;
		color: rgba(0, 0, 0, 0.7);
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}
	
	.footer .center-line {
		font-size: 24rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}
	
	.footer .footer-checkbox{
		transform:scale(0.7);
	}
	
	.login-icon-view{
		width: 100%;
		text-align: center;
		margin-top: 80rpx;
		display: flex;
		justify-content: center;
	}
	.login-icon-item{
		width: 120rpx;
	}
	.tips{
		margin-top: 20rpx;
		font-size: 28rpx;
	}
</style>